<template>
    <!-- class变成活的 -->
    <button :class="btnSize + ' ' + type + ' ' + plainClass + ' ' + disabledClass" :disabled="disabled">
        <slot name="icon">

        </slot>
        <slot></slot>
        <template v-if="loading">
            <slot name="loading">

            </slot>
        </template>

        <!-- {{ btnSize }} -->
    </button>
</template>
<script setup>
//通过 defineProps 接收 , computed 计算属性
import { defineProps, computed, defineExpose } from 'vue'
const props = defineProps({
    // 'large' | 'default' | 'small'
    size: {
        type: String,
        default: 'default',
    },
    type: {
        // 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text' (deprecated)
        type: String,
        default: 'primary',
    },
    plain: {
        type: Boolean,
        default: false
    },
    disabled: {
        type: Boolean,
        default: false
    },
    loading: {
        type: Boolean,
        default: false
    }

})

const btnSize = computed(() => {
    return 'font' + props.size
})
const plainClass = computed(() => {
    return 'plain' + props.plain
})

const disabledClass = computed(() => {
    return 'disabled' + props.disabled
})
//使用它抛出才能接收 defineExpose
defineExpose({
    size: props.size,
    type: props.type,
    disabled: props.disabled
})
</script>
<style scoped>
button {
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
}

.fontdefault {
    font-size: 16px;
}

.fontlarge {
    font-size: 20px;
}

.fontsmall {
    font-size: 12px;
}

.primary {
    background: red;
    color: white;
    border: 1px solid red;
}

.success {
    color: white;
    background: green;
    border: 1px solid palegoldenrod;

}

.warning {
    color: white;
    background: yellow;
    border: 1px solid blue;

}

.danger {
    color: white;
    background: red;
    border: 1px solid yellow;

}

.info {
    color: white;
    background: blue;
    border: 1px solid pink;

}

.text {
    color: white;
    background: gray;
    border: 1px solid orange;

}

.plaintrue {
    background: none;
    color: #000;
}

.plainfalse {
    background: none;
    color: #000;
}

.disabledtrue {
    background: #bbb;
    color: #FFF;
    border: 1px solid #bbb;
}
</style>